@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* 大屏幕 */
@media only screen and (min-width:1600px) {
  html{
    font-size: 14px;
  }
  .container {
    width: 80%;
    /* display: flex;
    margin: auto 20%;
    width: 100% */
  }
}

/* 大屏幕 */
@media only screen and (min-width:1200px) {
  html{
    font-size: 14px;
  }
  .container {
    width: 85%;
    /* display: flex;
    margin: auto 20%;
    width: 100% */
  }
}

/* 中等屏幕 */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  html{
    font-size: 12px;
  }
  .container {
    width: 90%;
    /* display: flex;
    margin: auto 10%; */
  }

}

/* 手机端显示 */

@media only screen and (max-width: 767px) {
  html{
    font-size: 10px;
  }
  .container {
    width: 100%;
    /* display: flex;
    margin: auto; */
  }
}

.fs10 {
  font-size: 10px;
}

.fs12 {
  font-size: 12px;
}

.fs13 {
  font-size: 13px;
}

.fs14 {
  font-size: 14px;
}

.fs15 {
  font-size: 15px;
}

.fs16 {
  font-size: 16px;
}

.fs17 {
  font-size: 17px;
}
.fs17 {
  font-size: 17px;
}
.fs18 {
  font-size: 18px;
}
.fs19 {
  font-size: 19px;
}
.fs20 {
  font-size: 20px;
}
.fs21 {
  font-size: 21px;
}
.fs22 {
  font-size: 22px;
}
.fs23 {
  font-size: 23px;
}
.fs24 {
  font-size: 24px;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: end;
  align-items: center;
}


/* tailwindcss */
/* 响应式尺寸
sm:640  md:768  ls:1024  xl:1280 2xl:1536

鼠标移上去
1. 添加卡片阴影
2. 卡片放大
3. 添加背景颜色渐变
4. 添加文字颜色 */


